<template>
  <div>
    <div class="search-Box">
      <div class="left-box">
        <div class="item">
          <div class="in-item">
            <span class="label" style="width:50px">账号:</span>
            <el-input size="mini" placeholder="输入账号" v-model="tempSearchParam.username"></el-input>
          </div>
          <div class="in-item">
            <el-button
              style="margin-left:20px"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="search"
            >搜索</el-button>
            <el-button
              style="margin-left:20px"
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="add"
            >添加</el-button>
          </div>
        </div>
      </div>
      <div class="right-box"></div>
    </div>
    <el-table :data="adminList" stripe style="width: 100%;height:780px">
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="identity" label="身份"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="checkInfo(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="foot-box">
      <div style="width:50%">
        <el-button type="success" @click="rufush">刷新</el-button>
      </div>
      <div style="width:50%">
        <el-pagination
          background
          :current-page="option.nowPage"
          layout="prev, pager, next"
          :page-size="option.size"
          :total="option.counts"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <div :class="['alertBg',isShow?'show':'']">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>修改密码</span>
        </div>
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input disabled v-model="changeSubmitForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="changeSubmitForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="surePassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitPasswordChange" type="success">确认</el-button>
            <el-button @click="close" style="margin-left:100px">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div :class="['alertBg',isAdd?'show':'']">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>添加管理员</span>
        </div>
        <el-form label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="addAdminUserForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="addAdminUserForm.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="surePassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitAddAdmin" type="success">确认</el-button>
            <el-button @click="close" style="margin-left:100px">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { handleMessage } from "../../plugins";
export default {
  data() {
    return {
      adminList: [],
      option: { nowPage: 1, size: 10, counts: 0 },
      tempSearchParam: {},
      searchParam: {},
      changeSubmitForm: {},
      surePassword: "",
      addAdminUserForm: {},
      isShow: false,
      isAdd: false,
      isSearch: false,
      indentifyCode: { 0: "学生", 1: "教师", 2: "管理员" },
      isEditId: ""
    };
  },
  methods: {
    add() {
      this.isAdd = true;
    },
    close() {
      this.isShow = false;
      this.isAdd = false;
      this.tempSearchParam = {};
      this.changeSubmitForm = {};
      this.addAdminUserForm = {};
    },
    search() {
      this.isSearch = true;
      this.option.nowPage = 1;
      this.searchParam.page = 1;
      this.searchParam.username = this.tempSearchParam.username;
      this.getSearchManagerList();
    },
    async submitPasswordChange() {
      if (!this.changeSubmitForm.password) {
        this.$message.error("密码不能为空！");
        return;
      }
      if (!this.surePassword) {
        this.$message.error("确认密码不能为空！");
        return;
      }
      if (this.changeSubmitForm.password != this.surePassword) {
        this.$message.error("密码和确认密码不一致，请核对后再进行操作！");
        return;
      }
      let res =await this.$http.put(
        `rest/AdminUser/${this.isEditId}`,
        this.changeSubmitForm
      );
      handleMessage(this, res.data);
      this.close();
    },
    async submitAddAdmin() {
      let usernameReg = /^[0-9a-zA-Z]*$/g;
      if (!this.addAdminUserForm.username) {
        this.$message.error("用户名不能为空！");
        return;
      }
      if (!usernameReg.test(this.addAdminUserForm.username)) {
        this.$message.error("用户名只能为字母+数字或字母或数字的组合！");
        return;
      }
      if (!this.addAdminUserForm.password) {
        this.$message.error("密码不能为空！");
        return;
      }
      if (!this.surePassword) {
        this.$message.error("确认密码不能为空！");
        return;
      }
      if (this.addAdminUserForm.password != this.surePassword) {
        this.$message.error("密码和确认密码不一致，请核对后再进行操作！");
        return;
      }
      let res = await this.$http.post("rest/AdminUser", this.addAdminUserForm);
      handleMessage(this, res.data);
      this.getManagerList();
      this.close();
    },
    checkInfo(index, row) {
      this.isShow = true;
      this.isEditId = row._id;
      this.changeSubmitForm.username = row.username;
    },
    rufush() {
      this.option.nowPage = 1;
      this.isSearch = false;
      this.searchParam = {};
      this.searchParam.page = 1;
      this.tempSearchParam = {};
      this.getManagerList();
    },
    handleCurrentChange(e) {
      option.nowPage = e;
      searchParam.page = e;
      if (isSearch) {
        this.getSearchManagerList();
      } else {
        this.getManagerList();
      }
    },
    getSearchManagerList() {
      return new Promise((re, rj) => {
        this.$http
          .get("searchList/AdminUser", { params: this.searchParam })
          .then(res => {
            if (res.data.success) {
              res.data.list.forEach(element => {
                element.identity = this.indentifyCode[element.identity];
              });
              this.adminList = res.data.list;
              this.option.counts = res.data.counts;
            } else {
              this.$message.error(res.data.message);
            }
            re && re();
          });
      });
    },
    getManagerList() {
      return new Promise((re, rj) => {
        this.$http
          .get("list/AdminUser", { params: this.searchParam })
          .then(res => {
            if (res.data.success) {
              res.data.list.forEach(element => {
                element.identity = this.indentifyCode[element.identity];
              });
              this.adminList = res.data.list;
              this.option.counts = res.data.counts;
            } else {
              this.$message.error(res.data.message);
            }
            re && re();
          });
      });
    }
  },
  created() {
    this.getManagerList();
  }
};
</script>

<style scoped>
.search-Box .item {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.search-Box .item:nth-child(1) {
  margin-top: 0;
}
.search-Box .in-item {
  display: flex;
  align-items: center;
}

.search-Box .in-item {
  margin-left: 50px;
}
.search-Box .in-item:nth-child(1) {
  margin: 0;
}
.in-item .label {
  width: 100px;
  font-size: 14px;
  text-align: right;
  margin-right: 10px;
}
.foot-box {
  display: flex;
  margin-top: 20px;
  align-items: flex-end;
  padding: 0 50px;
  padding-right: 80px;
  justify-content: space-between;
}
.alertBg {
  display: none;
}
.alertForm {
  padding-left: 10px;
}
.show {
  display: flex;
}
</style>